<template>
  <div class="h-full flex flex-col justify-between">
    <el-table
      ref="table"
      v-loading="loading"
      class="flex-1"
      row-key="id"
      height="1"
      show-overflow-tooltip
      :data="dataList"
    >
      <el-table-column min-width="300px" prop="name" label="商铺名称">
        <template #default="{ row }">
          <div class="flex items-center space-x-4">
            <span>{{ row.data.name }}</span>
            <el-tag v-if="row.data.invalid" size="mini" type="danger">已失效</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column min-width="80px" prop="data.area" label="面积">
        <template #default="{ row }">
          <span>{{ row.data.area }}㎡</span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="80px"
        prop="data.rentOrSaleLabel"
        label="租售类型"
      ></el-table-column>

      <el-table-column min-width="100px" prop="" label="价格">
        <template #default="{ row }">
          <span v-if="row.data.rentOrSale === '1'">{{ row.data.rent }}元/平米*月</span>
          <span v-if="row.data.rentOrSale === '2'">{{ row.data.price }}元/平米</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="是否推荐">
        <template #default="{ row }">
          <el-checkbox
            :checked="localIds.includes(row._id)"
            @change="(checked) => handleChecked(checked, row)"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div
      class="flex-none border-t border-solid border-gray-200 h-[50px] flex items-center justify-end"
    >
      <div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="pagination.pageNum"
          :total="total"
          :page-size.sync="pagination.pageSize"
          @current-change="fetchData()"
          @size-change="fetchData()"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import selectMixin from '../common/selectMixin'
export default Vue.extend({
  components: {},
  mixins: [
    selectMixin({
      templateName: 'B_CONSOLE_SHOP',
    }),
  ],
})
</script>
<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(50, 50, 50, 0.25);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.05);
  }
}
</style>
